<template>
	<div id="navmenu" class="container">
		<BouncedDialog
			:title="id ? '编辑' : '添加'"
			:dialog-show.sync="dialogShow"
			width="50%"
			class="addMenu"
		>
			<el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-width="80px">
				<el-form-item label="菜单类别" prop="type">
					<el-radio-group v-model="addForm.type">
						<el-radio :label="1">普通</el-radio>
						<el-input
							v-if="addForm.type == 1"
							v-model="addForm.href"
							placeholder="请输入菜单地址"
							class="type"
						/>
						<el-radio :label="2">关联栏目</el-radio>
						<el-select
							v-if="addForm.type == 2"
							v-model="addForm.category_id"
							class="type"
							@change="chooseColumn"
						>
							<el-option-group v-for="group in columnData" :key="group.id" :label="group.title">
								<el-option
									v-for="item in group.category"
									:key="item.id"
									:label="item.title"
									:value="item.id"
									:disabled="item.disable"
								/>
							</el-option-group>
						</el-select>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="名称" prop="title">
					<el-input v-model="addForm.title" />
				</el-form-item>
				<el-form-item label="菜单状态" prop="status">
					<el-select v-model="addForm.status">
						<el-option label="显示" :value="1" />
						<el-option label="隐藏" :value="2" />
					</el-select>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="addForm.sort" />
				</el-form-item>
				<el-form-item label="打开方式">
					<el-select v-model="addForm.target">
						<el-option label="本页面打开" value="_self" />
						<el-option label="新窗口打开" value="_blank" />
					</el-select>
				</el-form-item>
				<el-form-item label="Nofollow">
					<el-select v-model="addForm.no_follow">
						<el-option label="添加" :value="1" />
						<el-option label="不添加" :value="2" />
					</el-select>
				</el-form-item>

				<div class="btn">
					<el-button @click="dialogShow = false">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
		<el-tabs id="tabcard" v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
			<el-tab-pane v-for="item in langList" :key="item.id" :label="item.lang" :name="item.lang" />
		</el-tabs>
		<div class="center">
			<h3 class="title"><span />导航管理</h3>
			<div class="navcate">
				<ul class="leftNavcate">
					<li class="navtitle">导航列表</li>
					<li
						v-for="item in navList"
						:key="item.id"
						:class="activeId == item.id ? 'activeitem' : ''"
					>
						<span class="navtitle" @click="changenav(item.id)">{{ item.id }}-{{ item.title }}</span>
						<div class="icon">
							<i class="el-icon-delete" @click="delenav(item)" />
							<i class="el-icon-edit" @click="editnav(item)" />
						</div>
					</li>
					<el-button
						type="primary"
						class="add four"
						size="small"
						icon="el-icon-plus"
						style="margin: 10px 0 10px 20px"
						@click="addNav"
						>添加导航</el-button
					>
				</ul>
				<div class="rightmenu">
					<el-button
						type="primary"
						icon="el-icon-plus"
						class="addFmenu add four"
						size="small"
						@click="addFmenu"
						>添加菜单</el-button
					>
					<el-table
						ref="refTable"
						:data="menuData"
						row-key="id"
						:header-cell-style="{ 'text-align': 'center', 'background-color': '#f5f5f5' }"
						:cell-style="{ 'text-align': 'center' }"
						@row-click="expandChange"
					>
						<el-table-column label="ID" prop="id" width="100" />
						<el-table-column label="菜单名称" prop="title" />
						<el-table-column label="状态" prop="status" width="140px">
							<template slot-scope="scope">
								<el-switch
									v-model="scope.row.status"
									:active-value="1"
									:inactive-value="2"
									active-text="正常"
									inactive-text="禁用"
									active-color="#f84311"
									inactive-color="rgba(0,0,0,0.2)"
									@change="disableUser(scope.row)"
								/>
							</template>
						</el-table-column>
						<el-table-column label="排序" prop="sort" />
						<el-table-column label="操作" fixed="right" width="250px">
							<template slot-scope="scope">
								<el-button size="mini" class="orange" type="primary" @click="addCmenu(scope.row)"
									>添加子菜单</el-button
								>
								<el-button size="mini" class="edit" @click="edit(scope.row)">编辑</el-button>
								<el-button size="mini" class="dele" @click="del(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<BouncedDialog
			:title="addForm2.id ? '编辑' : '添加'"
			:dialog-show.sync="dialogShow2"
			width="50%"
			class="addMenu"
		>
			<el-form ref="addForm2" :model="addForm2" :rules="rules2" class="addForm" label-width="70px">
				<el-form-item label="名称" prop="title">
					<el-input v-model="addForm2.title" />
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="addForm2.description" type="textarea" />
				</el-form-item>
				<div class="btn">
					<el-button @click="dialogShow2 = false">取 消</el-button>
					<el-button type="primary" @click="submit2()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
	</div>
</template>

<script>
import navApi from '@/api/nav.js'
import websiteApi from '@/api/website.js'
import columnApi from '@/api/column.js'
import langApi from '@/api/websetting'
import moduleApi from '@/api/module'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			options: [], // 站点列表
			navList: '', // 导航列表
			siteId: '',
			searchForm: {
				website_id: '',
				cate_id: '',
			},
			menuData: [], // 菜单列表
			columnData: [], // 栏目列表
			addForm: {},
			rules: {
				title: [{ required: 'true', message: '请输入菜单名称', trigger: 'blur' }],
				status: [{ required: 'true', message: '请选择菜单状态', trigger: 'change' }],
				sort: [{ required: 'true', message: '请输入菜单排序', trigger: 'blur' }],
				type: [{ required: 'true', message: '请选择菜单类别', trigger: 'blur' }],
			},
			dialogShow: false,
			dialogShow2: false, // 导航分类弹窗
			addForm2: {}, // 导航表单
			rules2: {
				title: [{ required: 'true', message: '请输入导航名称', trigger: 'blur' }],
			},
			id: '', // 菜单id
			navid: '', // 导航id
			langList: [],
			activeName: '',
			lang: '',
			category_id: '',
		}
	},
	computed: {
		siteId1() {
			return this.$store.getters.siteId
		},
	},
	watch: {
		siteId1(val, value) {
			this.siteId = val
			this.searchForm.website_id = val
			this.getWebLang()
		},
	},
	created() {
		// this.getWebsite()
		this.siteId = this.$store.getters.siteId
		this.searchForm.website_id = this.$store.getters.siteId
		if (this.siteId) {
			this.getWebLang()
		}
	},

	mounted() {},
	methods: {
		// 切换关联栏目
		chooseColumn(val, value) {
			// 截取中文 复制给名称
			this.columnData.forEach((el) => {
				var selectName = el.category.find((el) => el.id == val).title
				if (selectName.substring(0, 2) == '--') {
					this.addForm.title = selectName.substring(selectName.lastIndexOf('-') + 1)
				} else {
					this.addForm.title = selectName
				}
				return
			})
		},
		// 站点语言列表
		getWebLang() {
			langApi.langInfo({ site_id: this.searchForm.website_id }).then((res) => {
				this.langList = res.data

				this.lang = res.data[0].lang
				this.activeName = res.data[0].lang
				this.getNavcate()
			})
		},
		// tab切换
		handleClick(val, value) {
			this.activeName = val.name
			this.lang = val.label
			// this.type = val.index
			// this.getList()
			this.getNavcate()
			this.getNav()
		},
		// 更改状态
		disableUser(row) {
			const val = {
				id: row.id,
				parent_id: row.parent_id,
				website_id: row.website_id,
				nav_cate_id: row.nav_cate_id,
				title: row.title,
				status: row.status,
				href: row.href,
				sort: row.sort,
				type: row.type,
				target: row.target,
				category_id: row.category_id,
				lang: this.lang,
				no_follow: row.no_follow,
			}

			navApi.navUpdate(val).then((res) => {
				if (res.code == 0) {
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 新增导航
		addNav() {
			this.addForm2 = {
				title: '',
				id: '',
				description: '',
				lang: this.lang,
			}
			this.dialogShow2 = true
		},
		// 编辑导航
		editnav(row) {
			this.addForm2 = {
				title: row.title,
				id: row.id,
				description: row.description,
				lang: this.lang,
			}
			this.dialogShow2 = true
		},
		// 删除导航
		delenav(row) {
			this.$confirm('此操作将永久删除该导航, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					const val = {
						id: row.id,
						website_id: row.website_id,
					}
					navApi.navCateDelete(val).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getNavcate()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 提交添加、修改导航
		submit2() {
			this.$refs.addForm2.validate((valid) => {
				if (valid) {
					if (!this.addForm2.id) {
						const val = {
							title: this.addForm2.title,
							description: this.addForm2.description,
							website_id: this.searchForm.website_id,
							lang: this.lang,
						}
						navApi.navCateSave(val).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow2 = false
								this.getNavcate()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						const val = {
							id: this.addForm2.id,
							title: this.addForm2.title,
							description: this.addForm2.description,
							website_id: this.searchForm.website_id,
							lang: this.lang,
						}
						navApi.navCateUpdate(val).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow2 = false
								this.getNavcate()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},
		// 栏目列表
		getColumnlist() {
			moduleApi
				.getModuleCate({
					site_id: [this.searchForm.website_id],
					lang: this.activeName,
				})
				.then((res) => {
					this.columnData = res.data
					// this.getTreeData(res.data)
				})
		},
		// 切换栏目
		changeColumn(val) {
			this.addForm.category_id = val[val.length - 1]
		},
		// 递归获取到columnData的数据
		getTreeData(data) {
			const columnArry = []
			for (var i = 0; i < data.length; i++) {
				if (data[i].status == 1) {
					columnArry.push({
						id: data[i].id,
						title: data[i].title,
						parent_id: data[i].parent_id,
						disable: false,
					})
				} else {
					columnArry.push({
						id: data[i].id,
						title: data[i].title,
						parent_id: data[i].parent_id,
						disable: true,
					})
				}
				if (data[i].children.length > 0) {
					for (var x = 0; x < data[i].children.length; x++) {
						columnArry.push({
							id: data[i].children[x].id,
							title: data[i].children[x].title,
							parent_id: data[i].children[x].parent_id,
						})
					}
				}
			}
			// 给parent_id!=0 的选项的title前加个标识
			columnArry.forEach((el) => {
				if (el.parent_id != 0) {
					this.$set(el, 'title', ' --- ' + el.title)
				}
			})
			this.columnData = columnArry
		},
		// 添加主菜单
		addFmenu() {
			this.id = ''
			this.addForm = {
				parent_id: 0,
				website_id: this.searchForm.website_id,
				nav_cate_id: this.searchForm.cate_id,
				title: '',
				status: 1,
				href: '',
				sort: '',
				type: '',
				target: '_blank',
				category_id: '',
				lang: this.lang,
				no_follow: 2,
			}
			this.getColumnlist()
			this.dialogShow = true
		},
		// 添加子菜单
		addCmenu(row) {
			this.id = ''
			this.addForm = {
				parent_id: row.id,
				website_id: this.searchForm.website_id,
				nav_cate_id: this.searchForm.cate_id,
				title: '',
				status: 1,
				href: '',
				sort: '',
				type: '',
				target: '_blank',
				category_id: '',
				lang: this.lang,
				no_follow: 2,
			}
			this.getColumnlist()
			this.dialogShow = true
		},
		// 编辑菜单
		edit(row) {
			this.getColumnlist()
			this.id = row.id
			this.addForm = {
				id: row.id,
				parent_id: row.parent_id,
				website_id: row.website_id,
				nav_cate_id: row.nav_cate_id,
				title: row.title,
				status: row.status,
				href: row.href,
				sort: row.sort,
				type: row.type,
				target: row.target,
				category_id: row.category_id,
				lang: row.lang,
				no_follow: row.no_follow,
			}
			this.dialogShow = true
		},
		// 提交添加、修改菜单
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					if (!this.addForm.id) {
						navApi.navSave({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getNav()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						navApi.navUpdate({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getNav()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},
		// 删除菜单
		del(row) {
			this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					const val = {
						id: row.id,
						website_id: row.website_id,
						cate_id: row.category_id,
					}
					navApi.navDelete(val).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getNav()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 展开折叠
		expandChange(row, index, e) {
			this.$refs.refTable.toggleRowExpansion(row)
		},
		// 左侧导航分类列表
		getNavcate() {
			navApi.navCateList({ website_id: this.siteId, lang: this.lang }).then((res) => {
				if (res.code == 0) {
					this.navList = res.data
					if (res.data.length > 0) {
						console.log(res.data)
						this.searchForm.cate_id = res.data[0].id
						// this.getNav(this.searchForm.website_id)// 分类列表读取完毕 读取导航
						this.changenav(this.searchForm.cate_id)
					}
				} else {
					// this.$message.error(res.msg)
				}
			})
		},
		changenav(id) {
			this.searchForm.cate_id = id
			this.activeId = id
			this.getNav()
		},
		// 菜单列表
		getNav() {
			const val = {
				website_id: this.siteId,
				cate_id: this.searchForm.cate_id,
				lang: this.lang,
			}
			navApi.navList(val).then((res) => {
				this.menuData = res.data
			})
		},
	},
}
</script>
<style lang="scss">
#navmenu {
	.el-tabs__header {
		margin-bottom: 0;
	}
	.tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
		background-color: #eee;
		border: none;
	}
	.tabs.el-tabs--card > .el-tabs__header .el-tabs__nav {
		border-radius: 0;
	}
	.tabs.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
		background-color: #fff;
	}
	.addMenu {
		.el-select {
			width: 100%;
		}
		.el-input.type,
		.el-select.type {
			width: 200px;
			margin-right: 30px;
		}
	}
	.el-cascader-panel .el-radio {
		width: 100%;
		height: 100%;
		z-index: 10;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.el-cascader-panel .el-radio__input {
		visibility: hidden;
	}
	.el-cascader-panel .el-cascader-node__postfix {
		top: 10px;
	}
}
</style>
<style scoped lang="scss">
.center {
	background-color: #fff;
	// padding: 20px 0;
	border: solid 1px #eee;
	border-top: none;
	h3.title {
		margin-left: 20px;
	}
	.navcate {
		// border-top: solid 1px #eee;
		display: flex;
		justify-content: left;
	}
}
.leftNavcate {
	list-style: none;
	margin-top: 20px;
	li.navtitle {
		font-size: 15px;
		font-weight: bold;
	}
	li {
		width: 220px;
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		.navtitle {
			cursor: pointer;
			width: 120px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.icon {
			display: none;
			i {
				cursor: pointer;
			}
			.el-icon-delete {
				margin-right: 10px;
			}
		}
	}
	.activeitem .icon {
		display: block;
	}
	// hover的样式
	li:hover {
		color: #f84311;
		background-color: #f4f8fc;
		.icon {
			display: block;
		}
	}
	//选中的样式
	li.activeitem {
		color: #f84311;
		background-color: #f4f8fc;
	}
}
.rightmenu {
	-webkit-box-flex: 3;
	box-flex: 3;
	padding-top: 20px;
	padding-left: 15px;
	border-left: solid 1px #eee;
	width: calc(100% - 220px);
	.addFmenu {
		margin-bottom: 20px;
	}
}
.status {
	padding: 5px 10px;
	color: #fff;
	border-radius: 5px;
}
.status.show {
	background-color: #0bc40f;
}
.status.hide {
	background-color: #df9513;
}
.addCmenu {
	color: #fff;
	background-color: #fe872b;
	border-color: #edeef3;
	border-radius: 16px;
}
.editor {
	color: #fff;
	background-color: #31b0d5;
	border-color: #2aabd2;
}
.dele {
	color: #fff;
	background-color: #ed5554;
	border-color: #ed5554;
}
</style>
